{% extends "xhs/layout.html" %}

{% block title %}小红书数据管理系统 - 笔记详情{% endblock %}

{% block page_title %}笔记详情{% endblock %}

{% block page_actions %}
<div class="btn-group">
    <a href="{{ url_for('xhs.notes_list') }}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-arrow-left"></i> 返回列表
    </a>
    <a href="{{ url_for('xhs.edit_note', note_id=note.id) }}" class="btn btn-sm btn-outline-primary">
        <i class="fas fa-edit"></i> 编辑笔记
    </a>
    <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete('{{ note.id }}', '{{ note.title }}')">
        <i class="fas fa-trash"></i> 删除笔记
    </button>
</div>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-book-open text-danger"></i> 笔记信息
            </div>
            <div class="card-body">
                <h3 class="mb-3">{{ note.title }}</h3>
                
                <div class="d-flex align-items-center mb-3">
                    <div class="mr-3">
                        <img src="https://via.placeholder.com/40" class="rounded-circle" alt="用户头像">
                    </div>
                    <div>
                        <div class="font-weight-bold">{{ note.author }}</div>
                        <div class="text-muted small">
                            {% if note.edit_time %}
                            发布于 {{ note.edit_time }}
                            {% else %}
                            采集于 {{ note.collect_time }}
                            {% endif %}
                        </div>
                    </div>
                    {% if note.keyword %}
                    <div class="ml-auto">
                        <a href="/notes?keyword={{ note.keyword }}" class="badge badge-primary">
                            {{ note.keyword }}
                        </a>
                    </div>
                    {% endif %}
                </div>
                
                <div class="note-content mb-4">
                    {% if note.content %}
                    <p>{{ note.content|safe }}</p>
                    {% else %}
                    <div class="text-muted text-center py-5">
                        <i class="fas fa-file-alt fa-3x mb-3"></i>
                        <p>没有详细内容</p>
                    </div>
                    {% endif %}
                </div>
                
                <div class="stats d-flex justify-content-start border-top pt-3">
                    <div class="mr-4">
                        <i class="fas fa-heart text-danger"></i> {{ note.likes|default(0) }} 喜欢
                    </div>
                    <div class="mr-4">
                        <i class="fas fa-star text-warning"></i> {{ note.collects|default(0) }} 收藏
                    </div>
                    <div>
                        <i class="fas fa-comment-alt text-primary"></i> {{ note.comments_count|default(0) }} 评论
                    </div>
                    {% if note.url %}
                    <div class="ml-auto">
                        <a href="{{ note.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-external-link-alt"></i> 查看原文
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-comments text-primary"></i> 评论 ({{ comments|length }})
            </div>
            <div class="card-body">
                {% if comments %}
                <div class="comments-list">
                    {% for comment in comments %}
                    <div class="comment mb-3 pb-3 border-bottom">
                        <div class="d-flex align-items-start">
                            <div class="mr-3">
                                <img src="https://via.placeholder.com/32" class="rounded-circle" alt="用户头像">
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="font-weight-bold">{{ comment.user_name }}</div>
                                    <div class="text-muted small">{{ comment.comment_time }}</div>
                                </div>
                                <div class="mt-1">{{ comment.comment_text }}</div>
                                <div class="mt-2 text-muted small">
                                    <i class="fas fa-heart"></i> {{ comment.likes|default(0) }}
                                    {% if comment.location %}
                                    <span class="ml-3">
                                        <i class="fas fa-map-marker-alt"></i> {{ comment.location }}
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-muted text-center py-5">
                    <i class="fas fa-comments fa-3x mb-3"></i>
                    <p>暂无评论数据</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-user text-info"></i> 作者信息
            </div>
            <div class="card-body">
                {% if user %}
                <div class="text-center mb-3">
                    <img src="https://via.placeholder.com/80" class="rounded-circle" alt="用户头像">
                    <h5 class="mt-2">{{ user.user_name }}</h5>
                    {% if user.location %}
                    <div class="text-muted">
                        <i class="fas fa-map-marker-alt"></i> {{ user.location }}
                    </div>
                    {% endif %}
                </div>
                
                <div class="row text-center">
                    <div class="col-4 border-right">
                        <div class="h4">{{ user.notes_count|default(0) }}</div>
                        <div class="small text-muted">笔记</div>
                    </div>
                    <div class="col-4 border-right">
                        <div class="h4">{{ user.followers_count|default(0) }}</div>
                        <div class="small text-muted">粉丝</div>
                    </div>
                    <div class="col-4">
                        <div class="h4">{{ user.following_count|default(0) }}</div>
                        <div class="small text-muted">关注</div>
                    </div>
                </div>
                
                <div class="mt-3">
                    <a href="/users/{{ user.user_id }}" class="btn btn-outline-info btn-block">
                        <i class="fas fa-user-circle"></i> 查看用户详情
                    </a>
                </div>
                {% else %}
                <div class="text-muted text-center py-4">
                    <i class="fas fa-user-circle fa-3x mb-3"></i>
                    <p>没有详细的作者信息</p>
                </div>
                {% endif %}
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-info-circle text-secondary"></i> 采集信息
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-5">笔记ID:</dt>
                    <dd class="col-7">{{ note.note_id }}</dd>
                    
                    <dt class="col-5">采集关键词:</dt>
                    <dd class="col-7">{{ note.keyword or '未知' }}</dd>
                    
                    <dt class="col-5">采集时间:</dt>
                    <dd class="col-7">{{ note.collect_time }}</dd>
                    
                    <dt class="col-5">评论数量:</dt>
                    <dd class="col-7">{{ note.comments_count|default(0) }}</dd>
                </dl>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // 初始化任何需要的JS功能
    });
    
    // 删除确认
    function confirmDelete(noteId, noteTitle) {
        if (confirm('确定要删除笔记 "' + noteTitle + '" 吗？此操作不可撤销。')) {
            // 创建表单并提交
            var form = document.createElement('form');
            form.method = 'POST';
            form.action = '/notes/' + noteId + '/delete';
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
{% endblock %} 